<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <input type="text" id="inp"> <button id="btn">按钮</button>
  <ul id="list">
    <li>水果价格表</li>
  </ul>
  <script>
    // 案例： 输入框输入水果，判断水果名称，在ul里面输出。
    // 苹果一个8元
    // 梨子一个5元
    // 草莓一个1元
    // 西瓜一个15元
    // 没有水果价格
    var fruits = [
      {
        name: "苹果",
        price: 8
      },
      {
        name: "梨子",
        price: 5
      },
      {
        name: "草莓",
        price: 1
      },
      {
        name: "西瓜",
        price: 15
      },
    ]

    var inp = document.getElementById("inp");
    var btn = document.getElementById("btn");
    var list = document.getElementById("list");

    // 写法3 (最简单方便的写法)
    btn.onclick = function () {
      var obj = fruits.find(function (item) {
        return item.name === inp.value;
      })
      if (obj) {
        list.innerHTML += "<li> " + inp.value + "一个" + obj.price + "元 </li>";
      } else {
        list.innerHTML += "<li>没有" + inp.value + "的价格</li>";
      }
    }


    //写法2
    // btn.onclick = function () {
    //   var i = fruits.findIndex(function (item) {
    //     return item.name === inp.value;
    //   })
    //   if (i != -1) {
    //     list.innerHTML += "<li> " + inp.value + "一个" + fruits[i].price + "元 </li>";
    //   } else {
    //     list.innerHTML += "<li>没有" + inp.value + "的价格</li>";
    //   }
    // }

    //写法1
    // btn.onclick = function () {
    //   for (var i = 0; i < fruits.length; i++) {
    //     var flag = true;
    //     if (fruits[i].name === inp.value) {
    //       list.innerHTML += "<li>" + inp.value + "一个" + fruits[i].price + "元" + "</li>";
    //       flag = false;
    //     }
    //   }
    //   if (flag) {
    //     list.innerHTML += "<li>没有" + inp.value + "价格</li>"
    //   }
    // }

  </script>
</body>

</html>